<template>
	<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
					<el-tree
						style="height:280px;overflow: auto;"
						ref="menu"
						node-key="id"
						:data="menu.list"
						:props="menu.props"
						show-checkbox></el-tree>
			</el-tab-pane>
			<el-tab-pane label="数据权限">
				<el-form label-width="100px" label-position="left" style="height:280px;overflow: auto;">
					<el-form-item :label="item.moduleName" v-for="item in optRole.list" :key="item.recordId" style="margin-bottom: 0px;">
						<el-checkbox-group size="small" v-model="optRole.selected[item.module]">
							<el-checkbox-button :label="item.module+':insert'">添加</el-checkbox-button>
							<el-checkbox-button :label="item.module+':manage'">管理</el-checkbox-button>
							<el-checkbox-button :label="item.module+':update'">修改</el-checkbox-button>
							<el-checkbox-button :label="item.module+':delete'">删除</el-checkbox-button>
							<el-checkbox-button :label="item.module+':query'">查询</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="移动端权限">
					<div class="treeMain">
						<el-tree
							style="height:280px;overflow: auto;"
							ref="appMenu"
							node-key="appId"
							:data="app.list"
							:props="app.props"
							show-checkbox></el-tree>
					</div>
			</el-tab-pane>
			<el-tab-pane label="桌面模块">
				<el-form label-width="100px" label-position="left" style="height:280px;overflow: auto;">
					<el-checkbox-group v-model="data.checkedDesk">
						<el-checkbox v-for="item in desk.list" :key="item.mKey" :label="item.mKey">{{item.title}}</el-checkbox>
					</el-checkbox-group>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				isSaveing: false,
				desk:{
					list:[],
				},
				optRole:{
					list:[],
					selected:{},
				},
				app: {
					list: [],
					checked: [],
					props: {
						value:"appId",
						label:"name"
					}
				},
				menu: {
					list: [],
					checked: [],
					props: {
						label: (data)=>{
							return data.meta.title
						}
					}
				},
				data: {
					roleId:'',
					checked: [],
					userRole:"",
					checkedMenuKeys:[],
					appCheckedAppKeys:[],
					checkedDesk:[],
					permission:'',
				},
				dashboard: "0",
			}
		},
		mounted() {
		},
		methods: {
			open(data){
				this.visible = true;
				this.data.roleId = data;
				this.getUserRoleById();
			},
			async submit(){
				this.isSaveing = true;
				//选中的和半选的合并后传值接口
				var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys());
				var checkedAppKeys = this.$refs.appMenu.getCheckedKeys().concat(this.$refs.appMenu.getHalfCheckedKeys());
				var params={
					roleId:this.data.roleId,
					menuIds:checkedKeys.join(","),
					mMenuIds:checkedAppKeys.join(","),
					deskModule:this.data.checkedDesk.join(","),
					permission:this.getPermission()
				}
				var res = await this.$API.system.userRole.update.post(params);
				if(res.code == 200){
					this.$emit('success', this.form, this.mode)
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
				this.visible = false;
			},
			async getMenu(){
				var res = await this.$API.system.menu.list.get()
				this.menu.list = res.data;
				this.$nextTick(() => {
					this.data.checkedMenuKeys.forEach(value => {
					this.$refs.menu.setChecked(value, true, false);
				})
				})
			},
			async getAppMenu(){
				var res = await this.$API.chat.appConfig.getAllAppConfigTree.get()
				this.app.list = res.data;
				this.$nextTick(() => {
					this.data.appCheckedAppKeys.forEach(value => {
						this.$refs.appMenu.setChecked(value, true, false);
					})
				})
			},
			async getUserRoleById(){
				var res = await this.$API.system.userRole.getPermissionByRoleId.get({roleId:this.data.roleId});
				if(res.code==200)
				{
					if(res.data)
					{
						if(res.data.menuIds)
						{
							this.data.checkedMenuKeys = res.data.menuIds.split(",");
						}
						if(res.data.mMenuIds)
						{
							this.data.appCheckedAppKeys = res.data.mMenuIds.split(",");
						}
						if(res.data.deskModule)
						{
							this.data.checkedDesk = res.data.deskModule.split(",");
						}
						if(res.data.permission)
						{
							let arr = res.data.permission.split(",");
							for(let index in arr)
							{
								let module = arr[index].split(":")[0];
								if(this.optRole.selected[module]==null)
								{
									this.optRole.selected[module] = [arr[index]];
								}else
								{
									this.optRole.selected[module].push(arr[index])
								}
							}
						}
					}
					this.getMenu();
					this.getAppMenu();
					this.getDeskConfigList();
					this.getAllUserOptRoleList();
				}
			},
			async getDeskConfigList(){
				var res = await this.$API.system.sysDeskConfig.getAllSysDeskConfigList.get()
				if(res.code==200)
				{
					this.desk.list = res.data;
				}
			},
			async getAllUserOptRoleList(){
				var res = await this.$API.system.userOptRole.getAllUserOptRoleList.get()
				if(res.code==200)
				{
					this.optRole.list = res.data;
				}
			},
			getPermission()
			{
				let permissionArr=[];
				for(let key in this.optRole.selected)
				{
					permissionArr=permissionArr.concat(this.optRole.selected[key])
				}
				return permissionArr.join(",");
			}
		}
	}
</script>

<style scoped>
</style>
